<template>
	<div id="loginPage">
		<div class="page__bd">
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label"><img src="../../assets/img/user-code-icon.png" class="img" /></label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="text" v-model="loginForm.username" placeholder="请输入用户名" maxlength="20"/>
					</div>
				</div>
				<div class="weui-cell pwd-box">
					<div class="weui-cell__hd"><label class="weui-label"><img src="../../assets/img/user-password-icon.png" class="img" /></label></div>
					<div class="weui-cell__bd">
						<input class="weui-input" type="password"  v-model="loginForm.password" placeholder="请输入密码" maxlength="20"/>
					</div>
				</div>
				<div class="page__test">
					<font>忘记密码？</font>
				</div>
				<div class="button-sp-area">
					<a href="javascript:;" class="weui-btn weui-btn_plain-default" id="btn" @click="login">登录</a>
				</div>

			</div>
			<div class="weui-footer">
				<img src="../../assets/img/logo.png" />
			</div>
		</div>
		<router-view></router-view>
	</div>
</template>

<!--<script type="text/javascript" src="../../assets/js/jquery.min.js"></script>-->


<script>
	export default {
		name: 'loginPage',
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			login() {
				let res = '';
				let code = '';
				let _this = this;
				if(this.$util.isEmpty(this.loginForm.username)) {
					this.$message({message: '用户名不能为空'});
				}else if(this.$util.isEmpty(this.loginForm.password)) {
					this.$message({message: '密码不能为空'});
				}else{
					let params = {
						name: this.loginForm.username,
						password: this.loginForm.password
					}
					// this.$post("/app/post/AppSysUserController/queryUserMationToLogin", params).then((json)=>{
          //      			if(json.returnCode === 0){//登录成功，存入本地cookies，七天有效期
          //      				localStorage.setItem('appUserToken', json.bean.id + "-APP");
          //      				localStorage.setItem(json.bean.id + "-APP", JSON.stringify(json.bean));
          //      				this.$router.push({path: '/MainIndex'});
          //      			}else{
          //      				this.$message({message: json.returnMessage});
          //      			}
          //   		});
          this.$router.push({path: '/MainIndex'});
				}
			}
		}
	}
</script>

<style scoped="scoped">
	#loginPage {
		width: 3.75rem;
		height: 100%;
		background: url('../../assets/img/loginbg2.png') repeat scroll top left;
		background-size: 100% 100%;
		overflow: hidden;
	}
	
	.page__bd{
		height: 100%;
	}
	
	.page__bd .weui-cells_form {
		background-color: transparent;
	    margin: 0 auto;
	    position: relative;
	    top: 50%;
	    margin-top: -160px;
	}
	
	.weui-cell {
	    padding: 10px;
	}
	
	.weui-cell:before{
		border-top: 0px !important;
	}
	
	.weui-cells:before {
		border-top: 0px !important;
	}
	
	.weui-cells:after {
		border-bottom: 0px !important;
	}
	
	.weui-cell__bd .weui-input{
	    height: 40px;
	    border-bottom: 1px solid white;
	    padding: 0 5px;
        width: calc(100% - 10px);
        color: lightgray;
	}
	
	.weui-cell__bd .weui-input::-webkit-input-placeholder{
		color: lightgray;
		font-size: 12px;
		text-align: left;
	}
	
	.weui-label{
		width: 50px;
	}
	
	.page__test {
		width: 100%;
		height: 0.5rem;
		margin-top: 10px;
		font-size: 12px;
		padding-left: 15px;
    	color: white;
	}
	
	.page__test p {
		font-size: 0.18rem;
		margin-left: 0.2rem;
	}
	
	#btn {
		width: 2.5rem;
		border-radius: 0.5rem;
	    background-color: rgb(57, 185, 242);
	    border: 0px;
	    color: white;
	    font-size: 15px;
	}
	
	.img {
	    width: 30px;
    	height: 30px;
	}
	
	.weui-footer {
	    width: 100%;
	    bottom: 0px;
	    position: absolute;
	    height: 70px;
	}
	
	.weui-footer img{
		height: 60%;
	    max-width: 60%;
	    margin-top: 15px;
	}
	
	:-moz-placeholder {
		color: white;
		opacity: 1;
	}
	
	::-moz-placeholder {
		color: white;
		opacity: 1;
	}
	
	input:-ms-input-placeholder {
		color: white;
		opacity: 1;
	}
	
	input::-webkit-input-placeholder {
		color: white;
		opacity: 1;
	}
</style>
